<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Domain Chart</title>
    <script src="/javascripts/Chart.min.js"></script>
    <style>
        #colo{
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        #colo li{
            width: 50px;
            padding-left: 0px;
            margin-left: 0px;
            margin-right: 5px;
            float: left;
            text-align: center;
            color: #ffffff;
        }
        #colo li:nth-child(1){
           background-color: rgba(186,22,12,1);
        }
        #colo li:nth-child(2){
            background-color: rgba(66,139,202,1);
        }
        #colo li:nth-child(3){
            background-color: rgba(93,115,129,1);
        }
        #colo li:nth-child(4){
            background-color: rgba(245,162,4,1);
        }
        #colo li:nth-child(5){
            background-color: rgba(33,132,29,1);
        }
        #colo li:nth-child(6){
            background-color: rgba(0,0,0,1);
        }
        #cvs{
            clear: both;
        }
    </style>
</head>
<body>
<h1><%=domain%> <%=days%> days line chart</h1>
<ul id="colo">
    <li>crawl</li>
    <li>retry</li>
    <li>fail</li>
    <li>lack</li>
    <li>save</li>
    <li>finish</li>
</ul>
<div id="cvs">
<canvas id="myChart" width="1024" height="600"></canvas>
</div>
<script>
    var data = {
        labels: <%- JSON.stringify(date_arr)%>,
        datasets: [
            {
                label: "crawl count",
                fillColor: "rgba(186,22,12,0.2)",
                strokeColor: "rgba(186,22,12,1)",
                pointColor: "rgba(186,22,12,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(186,22,12,1)",
                data: <%- JSON.stringify(crawl_arr)%>
            },
            {
                label: "retry count",
                fillColor: "rgba(66,139,202,0.2)",
                strokeColor: "rgba(66,139,202,1)",
                pointColor: "rgba(66,139,202,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(66,139,202,1)",
                data: <%- JSON.stringify(retry_arr)%>
            },
            {
                label: "fail count",
                fillColor: "rgba(93,115,129,0.2)",
                strokeColor: "rgba(93,115,129,1)",
                pointColor: "rgba(93,115,129,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(93,115,129,1)",
                data: <%- JSON.stringify(fail_arr)%>
            },
            {
                label: "lack count",
                fillColor: "rgba(245,162,4,0.2)",
                strokeColor: "rgba(245,162,4,1)",
                pointColor: "rgba(245,162,4,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(245,162,4,1)",
                data: <%- JSON.stringify(lack_arr)%>
            },
            {
                label: "save count",
                fillColor: "rgba(33,132,29,0.2)",
                strokeColor: "rgba(33,132,29,1)",
                pointColor: "rgba(33,132,29,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(33,132,29,1)",
                data: <%- JSON.stringify(save_arr)%>
            },
            {
                label: "finish count",
                fillColor: "rgba(0,0,0,0.2)",
                strokeColor: "rgba(0,0,0,1)",
                pointColor: "rgba(0,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(0,0,0,1)",
                data: <%- JSON.stringify(finish_arr)%>
            }
        ]
    };
    var options = {

        ///Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines : true,

        //String - Colour of the grid lines
        scaleGridLineColor : "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth : 1,

        //Boolean - Whether the line is curved between points
        bezierCurve : true,

        //Number - Tension of the bezier curve between points
        bezierCurveTension : 0.4,

        //Boolean - Whether to show a dot for each point
        pointDot : true,

        //Number - Radius of each point dot in pixels
        pointDotRadius : 4,

        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth : 1,

        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius : 20,

        //Boolean - Whether to show a stroke for datasets
        datasetStroke : true,

        //Number - Pixel width of dataset stroke
        datasetStrokeWidth : 2,

        //Boolean - Whether to fill the dataset with a colour
        datasetFill : true,

        legendTemplate : "<p>legend</p>"
    };

    var cavs = document.getElementById("myChart");
    cavs.width = window.screen.availWidth-20;
    var ctx = cavs.getContext("2d");
    var myLineChart = new Chart(ctx).Line(data, options);
</script>
</body>
</html>